<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加账单</title>
    <!-- 引入layui 样式-->
    <link rel="stylesheet" href="../../static/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../static/layer/css/layui.css"/>
    <style type="text/css">
        .shoufei-jiben-info {
            width: 100%;
            margin-bottom: 20px;
            padding: 30px 30px;
            box-sizing: border-box;
            background-color: #ffffff;
        }

        .charge-box {
            padding: 15px 0;
            border-bottom: 1px dashed #e6eef6;
        }

        .tab-body {
            background-color: #f4f4f4;
            padding: 20px;
            margin-bottom: 50px;
        }

        .blockquote-bottom {
            width: 100%;
            position: fixed;
            margin: 0;
            bottom: 0;
            left: 0;
            text-align: center;
            background-color: #ffffff;
            border-top: 1px solid #f4f4f4;
            z-index: 2;
        }

        .blockquote-bottom-item {
            margin: 15px 0;
        }

        .label-money {
            position: absolute;
            top: 10px;
            right: 5px;
            font-size: 14px;
            color: #c5d0da;
        }
        .layui-form-label1 {
            position: relative;
            float: left;
            display: block;
            padding: 15px 15px;
            width: 95px;
            font-weight: normal;
            line-height: 20px;
            text-align: right;
        }
    </style>
</head>
<body>
<form class="layui-form">
    <div class="layui-tab-content">
        <div class="tab-body">
            <div class="charge-box">
                <!--基本信息-->
                <div class="shoufei-jiben-info">
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            基本信息
                        </div>
                    </div>
                    <hr>
                    <input type="hidden" name="BILL_ID" id="ID">
                    <div class="layui-row">
                        <div class="layui-col-xs8">
                            <label class="layui-form-label">账单房源</label>
                            <div class="layui-inline">
                                <input type="text" name="ROOM_NUM" id="ROOM_NUM" lay-verify="title" autocomplete="off"
                                       placeholder="账单房源" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label">承租人姓名</label>
                            <div class="layui-inline">
                                <input type="text" name="COMPANY_NAME" id="COMPANY_NAME" lay-verify="title"
                                       autocomplete="off"
                                       placeholder="姓名" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="layui-row">
                        <div class="layui-col-xs8">
                            <label class="layui-form-label">账单周期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="START_DATE" id="START_DATE" class="layui-input"
                                       placeholder="开始时间" disabled>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="text" name="END_DATE" id="END_DATE" class="layui-input"
                                           placeholder="结束时间" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label">应付款时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="PAY_DATE" name="PAY_DATE" placeholder="应收租日期"
                                       disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <!--收费信息-->
                <div class="shoufei-jiben-info">
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <span class="shoufei_logo">收费</span>信息
                        </div>
                    </div>
                    <hr>
                    <div class="layui-row">
                        <div class="layui-col-xs12">
                            <table class="layui-table" lay-skin="line" lay-filter="sfxx">
                                <colgroup>
                                    <col width="200">
                                    <col width="200">
                                    <col width="200">
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>费用名称</th>
                                    <th><span class="yingshou_logo">应收</span>金额(元)</th>
                                    <th><span class="shifu_logo">实收</span>金额(元)</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td id="billName">房屋租金</td>
                                    <td id="zujin"></td>
                                    <td id="ACT_PAY_PRICEtd"><input type="number" class="layui-input" id="ACT_PAY_PRICE"
                                                                    name="" placeholder=""></td>

                                </tr>

                                <tr class="znj">
                                    <td>滞纳金</td>
                                    <td id="isLATE"></td>
                                    <td id="isLATEtd"><input type="number" class="layui-input" id="LATE_FEE" name=""
                                                             placeholder=""></td>

                                </tr>


                                <!--<tr>
                                    <td>押金</td>
                                    <td id="yajin"></td>
                                </tr>
                                <tr>
                                    <td>水电费</td>
                                    <td id="zafei"></td>
                                </tr>-->
                                <tr>
                                    <td>费用小计</td>
                                    <td id="xiaoji"></td>
                                    <td id="ACT_xiaojitd"><input type="number" class="layui-input" id="ACT_xiaoji"
                                                                 name="" placeholder=""></td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--支付信息-->
                <div class="shoufei-jiben-info">
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            支付信息
                        </div>
                        <!--<div class="layui-col-xs6">
                            <a href="javascript:;" id="" class="layui-btn layui-btn-mini addzf">添加支付信息</a>
                            <a href="javascript:;" id="" class="layui-btn layui-btn-mini delzf">删除支付信息</a>
                        </div>-->
                    </div>
                    <hr>
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">付款方式</label>
                            <div class="layui-inline" style="width: 161.84px">
                                <select name="PAY_METHOD" lay-verify="required" lay-search="">
                                    <option value="现金">现金</option>
                                    <option value="银行代扣">银行代扣</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <label class="layui-form-label1">收款账户</label>
                            <div class="layui-inline">
                                <!--<select name="ALLOT_BILL" lay-verify="required" lay-search="" disabled>
                                    <option id="select1" value="公户" >公户</option>
                                    <option id="select2" value="私户" >私户</option>
                                </select>-->
                                <input type="text" class="layui-input" id="select1" name="COLLECTION_TYPE"
                                       placeholder="" readonly>

                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">支付流水号</label>
                            <div class="layui-inline">
                                <input type="text" class="layui-input" id="" name="PAY_TRANSACTION" placeholder="流水号">
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <label class="layui-form-label1">实际支付日期</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="ACT_PAY_DATE" name="ACT_PAY_DATE"
                                       placeholder="实际支付日期">
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <label class="layui-form-label"><span class="shishou_logo">收费</span>金额</label>
                            <div class="layui-inline">
                                <input type="number" class="layui-input" id="PAY_PRICE" name="PAY_PRICE" placeholder=""
                                       readonly>
                                <span class="label-money">元</span>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="zhangdan-jiben-info">
                        <label class="layui-form-label">备注</label>
                        <div>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容" name="INFO" id="INFO" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <input type="checkbox" name="IS_RECEIPT" id="IS_RECEIPT" lay-skin="primary" title="发票"
                               disabled>
                    </div>

                </div>
                <div class="addzfxx"></div>
                <!--滞纳金-->


                <hr>
                <!--收费不需要 查看附件 -->
               <!-- <div class="shoufei-jiben-info">
                    <label class="layui-form-label">附件：</label>
                    <div class="layui-input-block layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多图片</button>
                        <div class="layui-upload-list">
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th>缩略图</th>
                                    <th>文件名</th>
                                    <th>大小</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="demoList"></tbody>
                            </table>
                        </div>
                        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                    </div>
                </div>-->


                <blockquote class="layui-form-item operate-button-group blockquote-bottom">
                    <div class="blockquote-bottom-item">
                        <button class="layui-btn layui-btn-small" lay-submit="" lay-filter="chargeadd">确定</button>
                        <button type="reset" class="layui-btn layui-btn-small layui-btn-primary cancel">取消</button>
                    </div>
                </blockquote>
            </div>
        </div>
    </div>
    </div>
</form>
<script type="text/javascript" src="../../static/layer/layui.js"></script>
<script type="text/javascript" src="../../static/js/common/queryUtils.js"></script>
<script type="text/javascript" src="../../static/js/common/dateUtils.js"></script>
<script type="text/javascript" src="../../static/ujs/contract/charge.js"></script>
</body>
</html>